<!--
 * @Author: WLang
 * @LastEditors: WLang
 * @Description: 
 * @Date: 2023-06-29 14:31:20
 * @LastEditTime: 2023-07-19 19:58:34
 * @FilePath: \myblog\src\views\ArticleList.vue
-->
<template>
    <div class="article-list" v-if="articleList.length && articleList">
      <el-card class="article-list--card" v-for="item in articleList" :key="item._id">
        <router-link :to="{name:'article', params:{id:item.id} }" style="color: #333">
          <CarArticleList :article="item" :id="item.id"/>
        </router-link>
      </el-card>
  </div>
  <el-card v-else class="blog-conent--item">
    <h3 class="bog-item--title">很遗憾 没有找到对应文章</h3>
    <el-button @click="routerEditor">快去写一篇吧</el-button>
  </el-card>
</template>

<script>
import QS from 'qs'
import CarArticleList from '@/components/card/CardAricleList.vue'
export default {
  name: 'ArticleList',
  components:{
    CarArticleList
  },
  data(){
    return {
      articleList: [],
      page: 1,
      size: 3,
      q: ''
    }
  },
  props: {
    loading: {
      type: Boolean
    }
  },
  inject: ['changeLoading'],
created(){
  this.getArticles();
},
mounted() {
  this.$EventBus.$on('active:search', (q) => {
    this.q = q;
    this.cancelArticles();
    this.getArticles();
  })
},
watch:{
  loading(load) {
    if(load)
    {
      this.getArticles();
    }
  }
},
computed:{},
methods:{
  getArticles () {
    let data = {size: this.size, page: this.page}
    let query = this.getQuery()
    if (Object.entries(query).length > 0)
    {
      data.query = QS.stringify(query)
    }
    this.$api({type: 'articles', data}).then(result => {
      if (this.articleList.length >= result.total)
      {
        this.$notify({
          title: '警告',
          message: '没有更多了',
          type: 'warning'
        });
      }
      this.articleList.push(...result.list)
      this.changeLoading()
      this.page++;
    }).catch(err => {
      this.$notify.error({
          title: '错误',
          message: err.message
        });
    })
  },
  routerEditor() {
    let columnId = this.$route.query.columnIdx
    this.$router.push({name: 'editor', query: {columnId}})
  },
  getQuery() {
    let column = this.$route.query?.columnIdx
    let q = this.q || undefined;
    let query = JSON.parse(JSON.stringify({
      column,q
    }))
    return query
  },
  cancelArticles() {
    this.page = 1;
    this.articleList = [];
  }
},
}
</script>
<style lang="scss" scoped>
  .article-list--card {
    margin-bottom: 10px;
  }
</style>